﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">  
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
    <style>
        body{
            margin: 0;
            background-color: #0151A2;
        }
        .box_img{
            display: flex;
            gap:2px;
            flex-wrap: wrap;
        }
        .box_img img{
            height: 128.66px;
            width: 32.5%;
        }
        .contain_swiper{
            width: 100%;
            height: inherit;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            margin: 0px;
            background-color: rgba(0, 0, 0);
            transition: all 1s;
            opacity: 0;
            z-index: -99;
            position: fixed;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        .swiper{
            width: inherit;
        }
        .swiper-slide{
            text-align: center;
            display: flex;
            align-items: center;
        }

        .swiper-slide img{
            width: 100%;
        }
        .num{
            position: absolute;
            top: 10px;
        }
        .reset{
            position: absolute;
            top: 10px;
            right: 5%;
        }
        .down{
            position: absolute;
            bottom: 5%;
        }
        .title{
            width: 95%;
            margin: 20px auto;
        }
        .time{
            overflow-x: scroll;
            box-sizing: border-box;
            padding: 5px;
            border-radius: 50px;
            background-color: rgba(255, 255, 255, .3);
            display: flex;
            gap: 30px;
            color:white;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div style="width: 100%;">
        <img src="img/headers.jpg" style="width: 100%;">
    </div>
    <div class="title">
        <b style="color:#010A59">照片直播</b><br/><br />
        <div class="time">
            <span style="display: flex;align-items: center;margin-left: 10px;"><img src="img/导航栏_筛选.png" style="width: 16px; height: 16px;"></span>
            <span>全部</span>
            <span>5月23日</span>
            <span>5月22日</span>
            <span>5月21日</span>
        </div>
    </div>
    <div class="box_img">
    </div>
    <div class="contain_swiper">
        <div style="text-align: center;color:white" id="num" class="num">
            
        </div>
        <div class="swiper">
            <div class="swiper-wrapper">
                
            </div>
        </div>

        <div style="text-align: center;" class="reset">
            <img src="img/cancel.png" id="reset" style="width: 30px;">
        </div>

        <div style="text-align: center;" class="down">
            <a style="color:white;text-decoration: none;" id="down"><img src="img/下载.png" style="width: 30px;" /><br />下载</a>
        </div>
    </div>
</body>
</html>

<script>
    //a标签使用downlode属性只会下载同源的图片 不同源只能预览 如果想要下载不同源的文件 使用请求拿到blob格式的文件再使用window.URl.createObjectURL转换就可以了 然后再写入a标签中 注意:下载的文件必须要有文件名
    var box_img_div = document.querySelector(".box_img")
    var swiperWrapper = document.querySelector(".swiper-wrapper")
    var contain_swiper = document.querySelector(".contain_swiper")
    var reset = document.querySelector("#reset")
    var num = document.querySelector("#num")
    var down = document.querySelector("#down")
    var box_img = null;
    var mySwiper;
    var img_index = 0
    var index = 0;
    var str = "";

    //图片加载
    function photoLoader(){
        //页数
        var num = 30;
        
        for(var i = index*num + 1 ;i<index*num+num + 1;i++){
            var img = document.createElement("img")
            str+=`
                <div class="swiper-slide">
                    <img src="people/IMG (${i}).JPG">
                </div>
            `
            img.src=`people/IMG (${i}).JPG`
            //列表添加图片
            box_img_div.appendChild(img)
            
        }
        swiperWrapper.innerHTML = str
        index++
        //页面初始化
        init()
        //列表点击事件
        listClick()
    }

    photoLoader()

    //页面高度宽度初始化
    function init(){
        document.body.style.height = window.innerHeight + "px";
        console.log(window.innerWidth)
        document.querySelectorAll(".box_img img").forEach((item,index)=>{
            item.style.width = (window.innerWidth/3) - 1.5 + "px"
            console.log((window.innerWidth/3) + "px")
        }) 
    }
    
    //列表点击事件
    function listClick(){
        box_img = document.querySelectorAll(".box_img img")
        box_img.forEach((item,index)=>{
            item.onclick = function(){
                //图片下标
                mySwiper.slideTo(index,0,function(){
                    //跳转初始化
                    UpdataNum(index)
                })
                contain_swiper.style.opacity = '1'
                contain_swiper.style.zIndex = '99'
            }
        })
    }

    


    //文件下载封装(无需同源)
    function fileDown(url,fileName){
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        //拿到的数据格式为blob
        xhr.responseType = 'blob';
        xhr.onload = function () {
            if (xhr.status === 200) {
                //转换为a标签可下载的格式 blob格式文件
                var link = window.URL.createObjectURL(xhr.response)
                down.href = link
                down.download = "img"
            }
        };
        xhr.send();
    }


    //点击下载
    down.onclick = function(){
        var src_img = box_img[img_index].src
        fileDown(src_img,"img"+img_index)
    }


    reset.addEventListener("click",function(){
        contain_swiper.style.opacity = '0'
        contain_swiper.style.zIndex = '-99'
    })

    //动态修改num
    function UpdataNum(i){
        img_index = i
        num.innerHTML = `${i + 1}/${box_img.length}`
    }

    mySwiper = new Swiper('.swiper', {
        on:{
            //实例初始化
            init:function(){
                UpdataNum(this.activeIndex)
            },
            //手放开执行事件
            slideChangeTransitionStart: function(swiper,event){
                UpdataNum(this.activeIndex)
            },
        }
    })
    

    
    
    // contain.addEventListener("touchend",function(e){
    //     if(x>e.changedTouches[0].clientX){

    //     }
    // })

</script>